import React from "react";

import { Link} from 'react-router-dom';

import { ajax ,showResultMessage,isNull} from '../../common';

import UIFormView from '../../uicomponents/UIFormView';

import UIView from '../../uicomponents/UIView';

import { Icon, Upload, Button,Row,Col,Spin } from 'antd';

import brace from 'brace';

import AceEditor from 'react-ace';

import 'brace/mode/xml';

import 'brace/theme/github';


/**
 * 导出 UI 数据文件
 */
export default class ExportProductUIDataPanel extends React.Component {

	state = {
		uiDomainId : 0,
        uiDataFileContent : "",
        loading : false,
    }

    actionHandler = (actionEvent) => {
        const {exportURL} = this.props;
		return {
			ok : () => {
				const { uiDomainId} = this.state;
				const formData = new FormData();
								
				ajax(exportURL + '/' + uiDomainId,formData,null).then(data => {
                    this.setState({uiDataFileContent : data});
					showResultMessage({
						success: true,
						message: '数据导出完成',
					});
				}).catch(message => {
					showResultMessage({
						success: false,
						message: '数据导出失败 : ' + message,
					});
				});
			},
		}
	}

	onValuesChange = (changedValues, allValues) => {
		
		this.setState({uiDomainId : changedValues.domainId});
		setTimeout(() => {
			this.setToolbarState(this.exportViewRef.getToolbar());
		});
		
	}

	setToolbarState = (toolbar) => {
		const {uiDomainId} = this.state;
		
		if(uiDomainId === 0){
			toolbar.disable('ok');
		}
		else{
			toolbar.enable('ok');
		}
	}

	render(){

        const {pageTitle,history} = this.props;

		return (
			<UIView 
				title={pageTitle}  
				extra={<Link to="/">返回</Link>} 
				actionGroupId="exportProductUIDataActionGroup" 
				actionHandler={this.actionHandler}
				history={history}
				toolbarPosition="bottom"
				setToolbarState={this.setToolbarState}
				ref={(inst) => this.exportViewRef = inst}
			>
				<Row>
					<Col span={10}>
						<UIFormView 
							formConfigId="exportUIDataForm" 
							bordered={false} 
							ref={(inst) => { this.domainFormRef = inst }}
							onValuesChange={this.onValuesChange}
						/>
					</Col>
				</Row>
				<Row>
					<Col span={24} >
                    <Spin tip="保存中..." spinning={this.state.loading}>
                        <AceEditor mode="xml" theme="github" width="100%" readOnly={true} value={this.state.uiDataFileContent} ref={ (inst) => this.pageCodeTemplateEditor = inst } />
                    </Spin>
					</Col>
				</Row>				
			</UIView>
		);
	}
}